<template>
    <div class="pie">
        <div class="chat" ref="chat2Ref"></div>
        <div class="chat chat1" ref="chatRef"></div>
    </div>
</template>
<script setup>
import { onBeforeUnmount, onMounted, reactive, ref, watch, computed } from 'vue';
import * as echarts from 'echarts'
import request from '/@/utils/request'
const state = reactive({
    data: ''
})
const chatRef = ref(), chat2Ref = ref();
let chatDistance, chat2Distance;
const initChat = () => {
    if (chatDistance) return;
    chatDistance = echarts.init(chatRef.value);
    const option = {
        legend: {
            show: true,
            bottom: 20,
            textStyle: {
                color: '#fff'
            }
        },
        color: [
            "rgba(4, 206, 204, 1)",
            "rgba(255, 203, 68, 1)",
            "#24CBFF",
            "#228AD9",
            "#ea66a6",
            "#65c294",
            "#dea32c",
            "#8552a1",
            "#00ae9d",
            "#ffe600",
            "#f36c21",
        ],
        tooltip: {
            trigger: 'item',
            backgroundColor: 'rgba(1, 58, 67, 0.90)',
            borderColor: 'rgba(24, 234, 247, 0)',
            textStyle: {
                color: '#fff'
            },
        },
        series: [
            {
                name: '',
                type: 'pie',
                radius: ["37%", "75%"],
                center: ["50%", "35%"],
                z: 2,
                avoidLabelOverlap: true, // 开启智能布局 (防止折线位置冲突)
                emphasis: {
                    show: true,
                    scaleSize: 6,
                    scale: true
                },
                label: {
                    padding: [0, -5, 0, -5],
                    width: 100,
                    show: true,
                    position: 'inner',
                    overflow: 'truncate'
                },
                // 控制图例的线
                labelLayout: {
                    hideOverlap: true
                },
                // data: state.data
            },
            // 边框的设置
            {
                radius: ["0%", "55%"],
                center: ["50%", "35%"],
                type: "pie",
                z: 3,
                emphasis: {
                    disabled: true
                },
                label: {
                    show: false,
                },
                labelLine: {
                    show: false,
                },
                silent: true,
                animation: false,
                tooltip: {
                    show: false,
                },
                data: [
                    {
                        value: 1,
                        itemStyle: {
                            color: "rgba(0,0,0,0.3)",
                        },
                    },
                ],
            },
        ]
    };
    chatDistance.setOption(option)
    if (state.data) {
        setData()
    }
    window.addEventListener('resize', chartResize)
};
const initChat2 = () => {
    chat2Distance = echarts.init(chat2Ref.value);
    let angle = 0, rrr = 0.82;
    const arc1 = () => {
        return {
            id: 'arc1',
            type: 'custom',
            coordinateSystem: 'none',
            renderItem: (params, api) => {
                return {
                    type: 'arc',
                    shape: {
                        cx: api.getWidth() / 2,
                        cy: api.getHeight() * 0.35,
                        r: Math.min(api.getWidth(), api.getHeight()) / 2 * rrr,
                        startAngle: (355 + -angle) * Math.PI / 180,
                        endAngle: (120 + -angle) * Math.PI / 180
                    },
                    style: {
                        fill: 'transparent',
                        stroke: '#00E0DB',
                        lineWidth: 1
                    },
                    silent: true
                }
            },
            data: [0]
        }
    }
    const arc2 = () => {
        return {
            id: 'arc2',
            type: 'custom',
            coordinateSystem: 'none',
            renderItem: (params, api) => {
                return {
                    type: 'arc',
                    shape: {
                        cx: api.getWidth() / 2,
                        cy: api.getHeight() * 0.35,
                        r: Math.min(api.getWidth(), api.getHeight()) / 2 * rrr,
                        startAngle: (175 + -angle) * Math.PI / 180,
                        endAngle: (300 + -angle) * Math.PI / 180
                    },
                    style: {
                        fill: 'transparent',
                        stroke: '#00E0DB',
                        lineWidth: 1
                    },
                    silent: true
                }
            },
            data: [0]
        }
    }
    const circle1 = () => {
        return {
            id: 'circle1',
            type: 'custom',
            coordinateSystem: 'none',
            renderItem: (params, api) => {
                let x0 = api.getWidth() / 2;
                let y0 = api.getHeight() * 0.35;
                let r = Math.min(api.getWidth(), api.getHeight()) / 2 * rrr;
                return {
                    type: 'circle',
                    shape: {
                        /** 角度355° 外弧1开始角度 */
                        cx: x0 + r * Math.cos((355 + -angle) * Math.PI / 180),
                        cy: y0 + r * Math.sin((355 + -angle) * Math.PI / 180),
                        r: 4
                    },
                    style: {
                        fill: '#00E0DB',
                        stroke: '#00E0DB'
                    },
                    silent: true
                }
            },
            data: [0]
        }
    }
    const circle2 = () => {
        return {
            id: 'circle2',
            type: 'custom',
            coordinateSystem: 'none',
            renderItem: (params, api) => {
                let x0 = api.getWidth() / 2;
                let y0 = api.getHeight() * 0.35;
                let r = Math.min(api.getWidth(), api.getHeight()) / 2 * rrr;
                return {
                    type: 'circle',
                    shape: {
                        /** 角度175° 外弧2开始角度 */
                        cx: x0 + r * Math.cos((175 + -angle) * Math.PI / 180),
                        cy: y0 + r * Math.sin((175 + -angle) * Math.PI / 180),
                        r: 4
                    },
                    style: {
                        fill: '#00E0DB',
                        stroke: '#00E0DB'
                    },
                    silent: true
                }
            },
            data: [0]
        }
    }
    const option = {
        series: [
            /** 绘制外部圆弧-1 <right-bottom> */
            arc1(),
            /** 绘制外部圆弧-2 <left-top> */
            arc2(),
            /** 绘制外部圆弧-1-开始圆点 <right-bottom> */
            circle1(),
            /** 绘制外部圆弧-2-开始圆点 <left-top> */
            circle2(),
            {
                type: "gauge",
                zlevel: 1,
                splitNumber: 13,
                radius: "45%",
                center: ["50%", "35%"],
                startAngle: 90,
                endAngle: -269.9999,
                axisLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    show: false,
                },
                splitLine: {
                    show: true,
                    length: 2,
                    lineStyle: {
                        width: 2,
                        color: "rgba(4, 206, 204, 1)",
                    },
                },
            },
            {
                type: "pie",
                radius: ["33%", '34%'],
                center: ["50%", "35%"],
                data: [{
                    value: 1,
                    itemStyle: {
                        color: 'rgba(4, 206, 204, 1)'
                    }
                }],
                label: {
                    show: false
                },
                silent: true,
                animation: false
            }
        ]
    };
    chat2Distance.setOption(option)
    setInterval(() => {
        angle = angle + 2;
        chat2Distance.setOption({
            series: [
                arc1(),
                arc2(),
                circle1(), circle2()
            ]
        });
    }, 50)
    window.addEventListener('resize', chartResize)
};
const chartResize = () => {
    chatDistance.resize()
    chat2Distance.resize()
}
const getRandom = (min, max) => {
    return Math.floor((Math.random() * (max - min + 1)) + min);
}
const setData = () => {
    chatDistance.setOption({
        series: [
            {
                data: state.data,
            }
        ],
    })
    // 解决mounted获取元素尺寸不准确问题
    setTimeout(() => {
        chartResize()
    }, 1000);
}
const getData = () => {
    state.data = [1, 2, 3, 4, 5].map(item => {
        return {
            name: `类目${item}`,
            value: item === 1 ? 11 : getRandom(10, 1000)
        }
    });
    if (chatDistance) {
        setData()
    }
    return
    request({
        url: 'analysisJudgment/getCategorize',
        method: 'post',
        data: {
        }
    }).then(res => {
        state.data = res;
        if (chatDistance) {
            setData()
        }
    })
}
onMounted(() => {
    getData()
    setTimeout(() => {
        initChat();
        initChat2()
    }, 0);
});
onBeforeUnmount(() => {
    window.removeEventListener('resize', chartResize)
})
</script>
<style lang="scss" scoped>
.pie {
    height: calc(100% - 52px);
    padding: 20px;
    box-sizing: border-box;

    .chat {
        height: 100%;
    }

    .chat1 {
        position: relative;
        top: -100%;
    }
}
</style>